/*
*@descript:Home页面
*@Author:@rennan
*@Data:2024-07-12
*@version:v1.0.0
*/

<template>
    <div class="my_discovery">
        <!--轮播图-->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" width="100%" height="200px" alt="轮播图"/>
            </van-swipe-item>
        </van-swipe>

        <!--宫格导航-->
        <van-grid :border="false" :column-num="4">
            <van-grid-item v-for="item in gridData" :key="item.id">
                <van-image :src="item.imgUrl" height="50px" width="50px"/>
                <div class="grid_text">{{item.text}}</div>
            </van-grid-item>
        </van-grid>

        <!--发现好歌单-->
        <div class="music_list">

            <div class="text">发现好歌单</div>
            <van-button plain round type="default" size="small">
                <span>更多推荐</span>
            </van-button>
        </div>
        <!--歌单列表-->
        <!-- 设置垂直间距 -->
        <van-row :gutter="[20, 20]">
            <van-col span="12" v-for="item in musicList" :key="item.id" @click="toMusicList(item.id)">
                <img :src="item.musicImg" alt="" width="100%" height="170px">
                <div>{{item.auth}}</div>
            </van-col>
        </van-row>

    </div>
</template>
<script setup>
import {ref} from 'vue'
//宫格数据
const gridData = ref([
    {id:1,imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.EM38H6BJLesmpf69Iu5sHQAAAA?w=265&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',text:"每日推荐"},
    {id:2,imgUrl:'https://tse1-mm.cn.bing.net/th/id/OIP-C.MGHrr9vtu0Pdi8PC11rt4AHaGe?w=207&h=181&c=7&r=0&o=5&dpr=1.5&pid=1.7',text:"私人歌单"},
    {id:3,imgUrl:'https://tse1-mm.cn.bing.net/th/id/OIP-C.oF4ZQVLrlab_MIsF9CcwLAHaHa?w=195&h=195&c=7&r=0&o=5&dpr=1.5&pid=1.7',text:"歌单"},
    {id:4,imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.cU-LtLr2GMMPV1VxFbl8BQHaHa?w=174&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',text:"排行榜"},
])

//歌单数据
const musicList = ref([
    {id:1,musicImg:'https://tse2-mm.cn.bing.net/th/id/OIP-C.cvt28wS_Z0vVLxTUX7rDjwAAAA?w=159&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',auth:'赵雷'},
    {id:2,musicImg:'https://tse4-mm.cn.bing.net/th/id/OIP-C.vbBXAIND_-ExlA9UViZyFwHaHa?w=180&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',auth:'赵雷'},
    {id:3,musicImg:'https://tse1-mm.cn.bing.net/th/id/OIP-C.RFhI1puOldQ9u8vpQT_mhwHaFj?w=216&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',auth:'痛仰乐队'},
    {id:4,musicImg:'https://tse1-mm.cn.bing.net/th/id/OIP-C.y-Cw6nLiTPmKG3KH7yuYywHaHa?w=152&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',auth:'周杰伦'},
])

//轮播图
const images = [
      'https://tse4-mm.cn.bing.net/th/id/OIP-C.IlXZ2j9s3s87SBdVpE68FAHaDa?w=337&h=161&c=7&r=0&o=5&dpr=1.5&pid=1.7',
      'https://tse2-mm.cn.bing.net/th/id/OIP-C.dF8MS49Oxql6NcmqEmnEMAHaEL?w=318&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',
      'https://tse3-mm.cn.bing.net/th/id/OIP-C.7xni_s0hfF6lCrpCwGeRHgAAAA?w=306&h=191&c=7&r=0&o=5&dpr=1.5&pid=1.7',
      'https://tse3-mm.cn.bing.net/th/id/OIP-C.tGyrkROz6bv0nH2GVa6m9wHaEK?w=320&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'
    ];

//跳转歌单详细步骤
const toMusicList = (id)=>{
    console.log('跳转歌单详情页',id);
}
</script>
<style scoped>
.my_discovery {
    margin-top: 10px;
    margin-bottom: 0px;
}
.grid_text{
    font-size:15px;
}

.music_list {
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding:10px;
}

.music_list .text {
    color:#0009;
    font-size:17px;
    font-weight:600;
}
.music_list .span {
    color:#000;
}
</style>